<template>
  <div class="head">
    <img :src="ic_search_gray" alt="" class="search" />
    <input
      type="text"
      placeholder="影视 图书 唱片 小组等"
      class="search-input"
    />
    <img :src="ic_scan_gray" alt="" class="scan" />
    <img :src="ic_chat_white" alt="" class="chat" />
  </div>
</template>

<script>
import ic_search_gray from '../assets/img/ic_search_gray.png'
import ic_scan_gray from '../assets/img/ic_scan_gray.png'
import ic_chat_white from '../assets/img/ic_chat_white.png'
export default {
  name: '',
  data() {
    return { ic_search_gray, ic_scan_gray, ic_chat_white }
  }
}
</script>

<style lang="less" scoped>
.head {
  background-color: #42c055;
  position: relative;
  height: 1rem;
  .search {
    position: absolute;
    width: 0.35rem;
    z-index: 1;
    top: 50%;
    left: 0.3rem;
    transform: translateY(-50%);
  }
  .search-input {
    position: absolute;
    width: 85%;
    height: 0.6rem;
    outline: none;
    border: none;
    border-radius: 0.1rem;
    padding-left: 0.6rem;
    font-size: 0.3rem;
    font-weight: bolder;
    color: rgba(0, 0, 0, 0.4);
    top: 50%;
    transform: translateY(-50%);
    left: 0.2rem;
  }
  .scan {
    position: absolute;
    width: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    left: 82%;
  }
  .chat {
    position: absolute;
    width: 0.5rem;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
